import { EChartsOption } from 'echarts';

const PieOptions: EChartsOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} ({d}%)',
    backgroundColor: 'rgba(255,255,255,0.9)',
    show: false,
  },
  legend: {
    orient: 'vertical',
    left: 10,
    textStyle: {
      color: '#fff',
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
        formatter: '{b}\n({d}%)',
        textBorderWidth: 0,
        textBorderColor: 'transparent',
        textShadowBlur: 0,
      },
      emphasis: {
        disabled: true,
        label: {
          show: true,
          fontSize: '14',
          color: '#fff',
        },
      },
      labelLine: {
        show: false,
      },
    },
    {
      name: '',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
        formatter: '{b}\n({d}%)',
        textBorderWidth: 0,
        textBorderColor: 'transparent',
        textShadowBlur: 0,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          color: '#fff',
        },
      },
      labelLine: {
        show: false,
      },
    },
  ],
};
const GaugeOptions: EChartsOption = {
  series: [
    {
      type: 'gauge',
      radius: '90%',

      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d'],
          ],
        },
      },
      axisTick: {
        // show: false,
        distance: 0,
        length: 4,
        splitNumber: 5,
        lineStyle: {
          color: '#34abdf',
          width: 1,
        },
      },
      pointer: {
        width: 10,
        length: '15%',
        offsetCenter: [0, '-40%'],
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        itemStyle: {
          color: 'auto',
        },
      },
      splitLine: {
        // show: false,
        distance: -27,
        length: 15,
        lineStyle: {
          color: 'rgba(0,0,0,0)',
          width: 2,
        },
      },
      axisLabel: {
        color: 'auto',
        distance: 26,
        fontSize: 10,
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} \n km/h',
        color: 'auto',
        offsetCenter: [0, '10%'],
        fontSize: 16,
      },
    },
  ],
};
const GaugeAndLeft: EChartsOption = {
  series: [
    {
      type: 'gauge',
      radius: '90%',
      axisLine: {
        lineStyle: {
          width: 15,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d'],
          ],
        },
      },
      axisTick: {
        distance: -14,
        length: 4,
        splitNumber: 10,
        lineStyle: {
          color: 'rgba(0,0,0,0.3)',
          width: 1,
        },
      },
      pointer: {
        width: 3,
        // length: '22%',
        // offsetCenter: [0, '-30%'],
        // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        itemStyle: {
          color: '#12edf1',
        },
      },
      splitLine: {
        distance: -15,
        length: 15,
        lineStyle: {
          color: 'rgba(255,255,255,0)',
          width: 2,
        },
      },
      axisLabel: {
        color: 'auto',
        distance: 26,
        fontSize: 10,
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} \n km/h',
        color: 'auto',
        offsetCenter: [0, '10%'],
        fontSize: 16,
      },
    },
  ],
};

const MultipleGuageItems: EChartsOption = {
  type: 'gauge',
  splitNumber: 10,
  radius: '80%',
  axisLine: {
    lineStyle: {
      width: 5,
      color: [
        [0.3, '#fd666d'],
        [0.764, '#37a2da'],
        [1, '#fd666d'],
      ],
    },
  },
  axisTick: {
    show: false,
    // distance: -14,
    // length: 4,
    // splitNumber: 2,
    lineStyle: {
      color: 'rgba(255,255,255,0.2)',
      width: 1,
    },
  },
  pointer: {
    width: 3,
    // length: '22%',
    // offsetCenter: [0, '-50%'],
    // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
    itemStyle: {
      color: '#13eff3',
    },
  },
  splitLine: {
    distance: -15,
    length: 15,
    lineStyle: {
      color: 'rgba(255,255,255,0)',
      width: 2,
    },
  },
  axisLabel: {
    show: false,
    color: 'auto',
    distance: -12,
    fontSize: 8,
    formatter: function (val) {
      //解决刻度的值为浮点数问题
      return Math.ceil(val);
    },
  },
  detail: {
    valueAnimation: true,
    color: 'auto',
    fontSize: 18,
    offsetCenter: [0, '20%'],
  },
};
const MultipleGuageOptions = {
  series: [
    // left
    {
      startAngle: 230,
      endAngle: 50,
      center: ['20%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 230,
      endAngle: 50,
      center: ['20%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 230,
      endAngle: 50,
      center: ['20%', '50%'],
      ...MultipleGuageItems,
    },

    // middle
    {
      startAngle: 210,
      endAngle: -30,
      center: ['50%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 210,
      endAngle: -30,
      center: ['50%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 210,
      endAngle: -30,
      center: ['50%', '50%'],
      ...MultipleGuageItems,
    },
    // right
    {
      startAngle: 130,
      endAngle: -50,
      center: ['80%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 130,
      endAngle: -50,
      center: ['80%', '50%'],
      ...MultipleGuageItems,
    },
    {
      startAngle: 130,
      endAngle: -50,
      center: ['80%', '50%'],
      ...MultipleGuageItems,
    },
  ],
};

const LineBarOptions: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    textStyle: {
      lineHeight: 60,
    },
    padding: 15,
    backgroundColor: 'rgba(255,255,255,0.9)',
  },
  legend: {
    textStyle: {
      color: '#fff',
    },
  },
  grid: {
    left: '50',
    right: '40',
    top: '30',
    bottom: '40',
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      color: '#ccc',
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '50%'],
    axisLabel: {
      color: '#ccc',
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: [3, 4],
        dashOffset: 4,
        color: '#000',
      },
    },
    splitArea: {
      show: false,
    },
  },
};

const ChartOptionInit = {
  pie: PieOptions,
  gauge: GaugeOptions,
  line: LineBarOptions,
  bar: LineBarOptions,
  multipleGuage: MultipleGuageOptions,
  gaugeLeft: GaugeAndLeft,
};

export default ChartOptionInit;
